<template>
    <div ref="containerRef">
        <!-- 面包屑 -->
        <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/' }">{{$t('目录.仪表盘')}}</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/panel/rank2' }">{{$t('目录.temu数据分析')}}</el-breadcrumb-item>
            <el-breadcrumb-item>{{$t('商品id')}}:{{goods_id}}</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <div class="detail-card">
            <!-- 大标题 -->
            <div style="display: flex;justify-content: space-between;">
                <div class="detail-card-title">{{$t('商品详情')}}</div>
                <div>
                    <el-button class="back-btn" @click="backLast()">{{ $t('返回') }}</el-button>
                </div>
            </div>
            <el-divider></el-divider>
            <!-- 详情 -->
<!--            <div v-if="!isStats">-->
<!--              <el-skeleton :rows="10" />-->
<!--            </div>-->
            <div style="display: flex;">
                <!-- 如果skus不是空的话 取banners数组轮播图-->
                <div style="width: 18.98rem;display: flex;" v-if="productInfo?.skus?.length">
                    <!-- 侧边图片展示 -->
                    <div>
                        <div v-show="isempty">
                            <div v-for="(item,index) in (imgList[currentColor]?.banners || []).slice(0,5)" :key="index">
                            <img style="width: 2.5rem;height:3.38rem;margin-top: 0.3rem;" :src="item" @click="changeimg(index)" 
                            :class="carouselIndex === index ? 'selected-img' : 'aside-img'"/>
                        </div>
                        </div>
                    </div>
                    <!-- 轮播图 -->
                    <div style="width: 14.38rem;height: 19.13rem;margin-left: 1rem;">
                        <!-- 图片未加载 一秒后显示 -->
                        <!-- <div v-show="!isempty" v-loading="true" element-loading-background="rgba(200, 200, 200, 0.8)" style="width: 14.38rem;height: 19.13rem;
                            border-radius: 0.5rem;"></div> -->
                        <el-carousel height="19.13rem" indicator-position="none" arrow="always" autoplay ref="carousel" @change="changeImg" v-show="isempty">
                            <el-carousel-item v-for="(item,index) in (imgList[currentColor]?.banners || []).slice(0,5)" :key="index">
                                <img style="width: 14.38rem;height: 19.13rem;" :src="item" />
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </div>
                <!-- 如果skus为空 取主图作为展示 不是轮播 -->
                <div v-else style="width: 18.98rem;display: flex;">
                    <!-- 侧边图片展示 -->
                    <div v-show="isempty">
                        <img style="width: 2.5rem;height:3.38rem;margin-top: 0.3rem;" :src="productInfo.cover" class="selected-img" />
                    </div>
                    <!-- 轮播图 -->
                    <div style="width: 14.38rem;height: 19.13rem;margin-left: 1rem;" v-show="isempty">
                        <img style="width: 14.38rem;height: 19.13rem;" :src="productInfo.cover"/>
                    </div>
                </div>
                <!-- 信息 -->
                <div style="margin-left: 1rem;width: 56rem;" v-show="isempty">
                    <!-- 标题行 -->
                    <div style="display: flex;">
                        <div class="product-title showOverTooltip">{{ productInfo.name }}</div>
                        <!-- <div><img style="width: 1.25rem;height: 1.25rem;margin-left: 4rem;" src="../assets/img/icon/link.svg" /></div>
                        <div><img style="width: 1.25rem;height: 1.25rem;margin-left: 1.25rem;" src="../assets/img/icon/share.svg" /></div>
                        <div><img style="width: 1.25rem;height: 1.25rem;margin-left: 1.25rem;" src="../assets/img/icon/scan.svg" /></div>
                        <div><img style="width: 1.25rem;height: 1.25rem;margin-left: 1.25rem;" src="../assets/img/icon/favoriter.svg" /></div> -->
                    </div>
                    <!-- tag标签 登录后-->
                    <div v-if="isLogin">
                      <div v-if="isVip" style="display: flex;width: 55rem;justify-content: flex-start;flex-wrap: wrap;" >
                        <el-tag type="danger" v-for="(item,index) in tagList" :key="index" style="margin: 1rem 1rem 0 0;" v-show="tagList.length!==0">
                          <div style="display: flex;">
                            <img style="width: 1.25rem;height: 1.25rem;margin-left: -0.3rem;" src="../assets//img/icon/crown.svg" />
                            <div class="tag-word">{{item}}</div>
                          </div>
                        </el-tag>
                        <!-- 下榜 -->
                        <div v-show="tagList.length==0 ">
                          <el-tag type="info" effect="light" style="margin: 1rem 1rem 0 0;width: 13rem;">
                            <div style="display: flex;">
                              <img style="width: 1.25rem;height: 1.25rem;margin-left: -0.3rem;" src="../assets//img/icon/if-crown.svg" />
                              <div class="tag-word" style="color:#69696A ;">{{$t('没在榜上')}}</div>
                            </div>
                          </el-tag>
                        </div>
                      </div>
                      <!-- 不是会员时显示 tag-->
                      <div v-else-if="!isVip" style="display: flex;width: 55rem;">
                        <el-tag type="danger" style="margin: 1rem 1rem 0 0;width: 13rem;">
                          <div style="display: flex;">
                            <img style="width: 1.25rem;height: 1.25rem;margin-left: -0.3rem;" src="../assets//img/icon/crown.svg" />
                            <div class="tag-word">Top ?</div>
                          </div>
                        </el-tag>
                      </div>
                    </div>
                    <!-- 未登录-->
                    <div v-else>
                      <div style="display: flex;width: 55rem;justify-content: flex-start;flex-wrap: wrap;" >
                        <el-tag type="danger" v-for="(item,index) in tagList" :key="index" style="margin: 1rem 1rem 0 0;" v-show="tagList.length!==0">
                          <div style="display: flex;">
                            <img style="width: 1.25rem;height: 1.25rem;margin-left: -0.3rem;" src="../assets//img/icon/crown.svg" />
                            <div class="tag-word">{{item}}</div>
                          </div>
                        </el-tag>
                        <!-- 下榜 -->
                        <div v-show="tagList.length==0 ">
                          <el-tag type="info" effect="light" style="margin: 1rem 1rem 0 0;width: 13rem;">
                            <div style="display: flex;">
                              <img style="width: 1.25rem;height: 1.25rem;margin-left: -0.3rem;" src="../assets//img/icon/if-crown.svg" />
                              <div class="tag-word" style="color:#69696A ;">{{$t('没在榜上')}}</div>
                            </div>
                          </el-tag>
                        </div>
                      </div>
                    </div>
                    <div class="product-color">{{ $t('商品详情.颜色') }}:</div>
                    <!-- 颜色选项 如果skus不为空-->
                    <div style="display: flex;width: 55rem; flex-wrap: wrap;margin-top: 0.5rem;" v-if="productInfo?.skus?.length">
                        <el-button :class="item.select_color" v-for="(item,index) in imgList" :key="index"
                        @click="colorSelect(index)">{{ item.attr_value_en}}</el-button>
                    </div>
                    <!-- 如果skus为空 -->
                    <div v-else style="margin-top: 0.5rem;">
                        <el-button class="color-btn-click" >{{$t('skus按钮.默认')}}</el-button>
                    </div>
                    <div v-if="isLogin">
                      <!-- 价格行 是否是会员-->
                      <div v-if="isVip" style="display: flex;">
                        <div style="margin-right: 1rem;">
                          <div class="procuct-price-title">{{ $t('商品详情.购买价格') }}</div>
                          <div class="product-price">
                            <span style="font-size: 0.75rem;"></span>
                            <span>{{ productInfo.sale_price_symbol }}</span>
                          </div>
                        </div>
                        <!-- <div style="margin-right: 1rem;">
                            <div class="procuct-price-title">{{ $t('商品详情.运费') }}</div>
                            <div class="product-price">
                                <span style="font-size: 0.75rem;"></span>
                                <span>{{ productInfo.shipping_fee }}</span>
                            </div>
                        </div> -->
                        <div style="margin-right: 1rem;">
                          <div class="procuct-price-title">{{ $t('商品详情.零售价') }}</div>
                          <div class="product-price">
                            <span style="font-size: 0.75rem;"></span>
                            <span>{{ productInfo.retail_price_symbol }}</span>
                          </div>
                        </div>
                        <!-- <div style="margin-right: 1rem;">
                            <div class="procuct-price-title">{{ $t('商品详情.利润') }}</div>
                            <div class="product-price">
                                <span style="font-size: 0.75rem;"></span>
                                <span>{{ productInfo.profit }}</span>
                            </div>
                        </div> -->
                        <div style="margin-right: 1rem;">
                          <div class="procuct-price-title" style="width: 9.38rem;">{{ $t('商品详情.客户评价') }}</div>
                          <!-- 评分 -->
                          <div style="margin: -0.1rem 0 0 -0.2rem;" v-if="productInfo.star_comment!=='0.00'">
                            <el-rate v-model="productInfo.star_comment" disabled allow-half show-score="{productInfo.star_comment}"/>
                          </div>
                          <!-- 无数据显示5分 -->
                          <div style="margin: -0.1rem 0 0 -0.2rem;" v-else>
                            <el-rate v-model="score2" disabled allow-half show-score="{score2}"/>
                          </div>
                        </div>
                      </div>
                      <div v-else style="display: flex;">
                        <div style="margin-right: 1rem;">
                          <div class="procuct-price-title">{{ $t('商品详情.购买价格') }}</div>
                          <div class="product-price">
                            <span style="font-size: 0.75rem;">$</span>
                            <span>???</span>
                          </div>
                        </div>
                        <div style="margin-right: 1rem;">
                          <div class="procuct-price-title">{{ $t('商品详情.运费') }}</div>
                          <div class="product-price">
                            <span style="font-size: 0.75rem;">$</span>
                            <span>???</span>
                          </div>
                        </div>
                        <div style="margin-right: 1rem;">
                          <div class="procuct-price-title">{{ $t('商品详情.零售价') }}</div>
                          <div class="product-price">
                            <span style="font-size: 0.75rem;">$</span>
                            <span>???</span>
                          </div>
                        </div>
                        <div style="margin-right: 1rem;">
                          <div class="procuct-price-title">{{ $t('商品详情.利润') }}</div>
                          <div class="product-price">
                            <span style="font-size: 0.75rem;">$</span>
                            <span>???</span>
                          </div>
                        </div>
                        <div style="margin-right: 1rem;">
                          <div class="procuct-price-title" style="width: 9.38rem;">{{ $t('商品详情.客户评价') }}</div>
                          <!-- 评分 -->
                          <div style="margin: -0.1rem 0 0 -0.2rem;">
                            <span class="product-price" style="color: black;margin-top: -0.3rem;">? ?  </span>
                            <el-rate v-model="score1" allow-half disabled/>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div v-else>
                      <!-- 价格行 是否是会员-->
                      <div style="display: flex;">
                        <div style="margin-right: 1rem;">
                          <div class="procuct-price-title">{{ $t('商品详情.购买价格') }}</div>
                          <div class="product-price">
                            <span style="font-size: 0.75rem;"></span>
                            <span>{{ productInfo.sale_price_symbol }}</span>
                          </div>
                        </div>
                        <!-- <div style="margin-right: 1rem;">
                            <div class="procuct-price-title">{{ $t('商品详情.运费') }}</div>
                            <div class="product-price">
                                <span style="font-size: 0.75rem;"></span>
                                <span>{{ productInfo.shipping_fee }}</span>
                            </div>
                        </div> -->
                        <div style="margin-right: 1rem;">
                          <div class="procuct-price-title">{{ $t('商品详情.零售价') }}</div>
                          <div class="product-price">
                            <span style="font-size: 0.75rem;"></span>
                            <span>{{ productInfo.retail_price_symbol }}</span>
                          </div>
                        </div>
                        <!-- <div style="margin-right: 1rem;">
                            <div class="procuct-price-title">{{ $t('商品详情.利润') }}</div>
                            <div class="product-price">
                                <span style="font-size: 0.75rem;"></span>
                                <span>{{ productInfo.profit }}</span>
                            </div>
                        </div> -->
                        <div style="margin-right: 1rem;">
                          <div class="procuct-price-title" style="width: 9.38rem;">{{ $t('商品详情.客户评价') }}</div>
                          <!-- 评分 -->
                          <div style="margin: -0.1rem 0 0 -0.2rem;" v-if="productInfo.star_comment!=='0.00'">
                            <el-rate v-model="productInfo.star_comment" disabled allow-half show-score="{productInfo.star_comment}"/>
                          </div>
                          <!-- 无数据显示5分 -->
                          <div style="margin: -0.1rem 0 0 -0.2rem;" v-else>
                            <el-rate v-model="score2" disabled allow-half show-score="{score2}"/>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- 按钮 是否是会员-->
                    <!-- <div v-if="isVip" style="display: flex;">
                        <div style="margin: 1rem 0 0 27rem;">
                            <el-button class="card1-btn" style="background-color:#fff; color:#165DFF;">{{$t('按钮.查看商品详情')}}</el-button>
                        </div>
                        <div style="margin: 1rem 0 0 1rem;">
                            <el-button class="card1-btn" style="background-color:#fff; color:#165DFF;">{{$t('按钮.订购样品')}}</el-button>
                        </div>
                        <div style="margin: 1rem 0 0 1rem;">
                            <el-button class="card1-btn" style="background-color:#165DFF; color:#fff;">{{$t('按钮.添加到Shopify')}}</el-button>
                        </div>
                    </div>
                    <div v-else style="display: flex;">
                        <div style="margin: 1rem 0 0 27rem;">
                            <el-button class="card1-btn" style="border: none;background-color:#bbb;color:#4E5969" disabled>{{$t('按钮.查看商品详情')}}</el-button>
                        </div>
                        <div style="margin: 1rem 0 0 1rem;">
                            <el-button class="card1-btn" style="border: none;background-color:#bbb;color:#4E5969" disabled>{{$t('按钮.订购样品')}}</el-button>
                        </div>
                        <div style="margin: 1rem 0 0 1rem;">
                            <el-button class="card1-btn" style="border: none;background-color:#bbb;color:#4E5969" disabled>{{$t('按钮.添加到Shopify')}}</el-button>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
        <!-- 数据卡片 -->
        <div class="data-card" id="dataCard">
             <div style="display: flex;justify-content: space-between;">
                <!-- 分段器1 -->
                <div class="custom-style" style="width: 15rem;">
                    <el-segmented v-model="value1" :options="options1" block style="background-color: #fff;" @change="segmentChange1"></el-segmented>
                </div>
                <!-- 分段器2 -->
                <div style="width: 17.5rem;">
                    <el-segmented v-model="value2" :options="options2" block @change="segmentChange2"></el-segmented>
                </div>
             </div>
            <!-- 一行 数据 是否是vip-->
            <!--加载中 -->
            <div v-show="!isStats" v-loading="true" element-loading-text="Loading..." style="position: absolute;left: 52.5%;top: 34%;border-radius: 0.5rem;"></div>
            <div v-if="isLogin">
              <div v-if="isVip" style="display: flex;">
                <div style="margin-right: 1rem;">
                  <div class="procuct-price-title">{{ $t('数据展示.销售量') }}</div>
                  <div class="product-price" style="height: 2.5rem;line-height: 2.5rem">
                    <span style="color: black;">{{productStatus.total_sale_count_str}}</span>
                  </div>
                </div>
                <div style="margin-right: 1rem;">
                  <div class="procuct-price-title">{{ $t('数据展示.销售收入') }}</div>
                  <div class="product-price" style="height: 2.5rem;line-height: 2.5rem">
                    <span style="font-size: 0.75rem;"></span>
                    <span>{{productStatus.revenue_str}}</span>
                  </div>
                </div>
                <div style="margin:0 1rem 0 7rem;">
                  <div class="procuct-price-title">{{ $t('数据展示.视域') }}</div>
                  <div class="product-price" style="height: 2.5rem;line-height: 2.5rem">
                    <span style="color: black;">{{productStatus.views}}</span>
                  </div>
                </div>
                <div style="margin:0 1rem 0 0;">
                  <div class="procuct-price-title" style="width: 6.25rem;">{{ $t('数据展示.转换率') }}</div>
                  <div class="product-price" style="height: 2.5rem;line-height: 2.5rem">
                    <span style="color: black;">{{productStatus.conversion_rate}}</span>
                  </div>
                </div>
                <div style="margin:0 1rem 0 7rem;">
                  <div class="procuct-price-title">{{ $t('数据展示.Shopify商店') }}</div>
                  <div class="product-price" style="height: 2.5rem;line-height: 2.5rem">
                    <span style="color: black;">{{productStatus.shopify}}</span>
                  </div>
                </div>
                <div style="margin:0 1rem 0 0;">
                  <div class="procuct-price-title">{{ $t('数据展示.Ebay商店') }}</div>
                  <div class="product-price" style="height: 2.5rem;line-height: 2.5rem">
                    <span style="color: black;">{{productStatus.ebay}}</span>
                  </div>
                </div>
                <div style="margin:0 1rem 0 0;">
                  <div class="procuct-price-title" style="width: 6.25rem;">{{ $t('数据展示.AliExpress商店') }}</div>
                  <div class="product-price" style="height: 2.5rem;line-height: 2.5rem">
                    <span style="color: black;">{{productStatus.ali}}</span>
                  </div>
                </div>
                <div style="margin:0 1rem 0 0;">
                  <div class="procuct-price-title">{{ $t('数据展示.亚马逊商店') }}</div>
                  <div class="product-price" style="height: 2.5rem;line-height: 2.5rem">
                    <span style="color: black;">{{productStatus.amazon}}</span>
                  </div>
                </div>
              </div>
              <div v-else style="display: flex;">
                <div style="margin-right: 1rem;">
                  <div class="procuct-price-title">{{ $t('数据展示.销售量') }}</div>
                  <div class="product-price" style="height: 2.5rem;line-height: 2.5rem">
                    <span style="color: black;">? ? ?</span>
                  </div>
                </div>
                <div style="margin-right: 1rem;">
                  <div class="procuct-price-title">{{ $t('数据展示.销售收入') }}</div>
                  <div class="product-price" style="height: 2.5rem;line-height: 2.5rem">
                    <span style="font-size: 0.75rem;">$</span>
                    <span>? ? ?</span>
                  </div>
                </div>
                <div style="margin:0 1rem 0 7rem;">
                  <div class="procuct-price-title">{{ $t('数据展示.视域') }}</div>
                  <div class="product-price" style="height: 2.5rem;line-height: 2.5rem">
                    <span style="color: black;">? ? ?</span>
                  </div>
                </div>
                <div style="margin:0 1rem 0 0;">
                  <div class="procuct-price-title" style="width: 6.25rem;">{{ $t('数据展示.转换率') }}</div>
                  <div class="product-price" style="height: 2.5rem;line-height: 2.5rem">
                    <span style="color: black;">? ? ?</span>
                  </div>
                </div>
                <div style="margin:0 1rem 0 7rem;">
                  <div class="procuct-price-title">{{ $t('数据展示.Shopify商店') }}</div>
                  <div class="product-price" style="height: 2.5rem;line-height: 2.5rem">
                    <span style="color: black;">? ? ?</span>
                  </div>
                </div>
                <div style="margin:0 1rem 0 0;">
                  <div class="procuct-price-title">{{ $t('数据展示.Ebay商店') }}</div>
                  <div class="product-price" style="height: 2.5rem;line-height: 2.5rem">
                    <span style="color: black;">? ? ?</span>
                  </div>
                </div>
                <div style="margin:0 1rem 0 0;">
                  <div class="procuct-price-title" style="width: 6.25rem;">{{ $t('数据展示.AliExpress商店') }}</div>
                  <div class="product-price" style="height: 2.5rem;line-height: 2.5rem">
                    <span style="color: black;">? ? ?</span>
                  </div>
                </div>
                <div style="margin:0 1rem 0 0;">
                  <div class="procuct-price-title">{{ $t('数据展示.亚马逊商店') }}</div>
                  <div class="product-price" style="height: 2.5rem;line-height: 2.5rem">
                    <span style="color: black;">? ? ?</span>
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <div style="display: flex;">
                <div style="margin-right: 1rem;">
                  <div class="procuct-price-title">{{ $t('数据展示.销售量') }}</div>
                  <div class="product-price" style="height: 2.5rem;line-height: 2.5rem">
                    <span style="color: black;">{{productStatus.total_sale_count_str}}</span>
                  </div>
                </div>
                <div style="margin-right: 1rem;">
                  <div class="procuct-price-title">{{ $t('数据展示.销售收入') }}</div>
                  <div class="product-price" style="height: 2.5rem;line-height: 2.5rem">
                    <span style="font-size: 0.75rem;"></span>
                    <span>{{productStatus.revenue_str}}</span>
                  </div>
                </div>
                <div style="margin:0 1rem 0 7rem;">
                  <div class="procuct-price-title">{{ $t('数据展示.视域') }}</div>
                  <div class="product-price" style="height: 2.5rem;line-height: 2.5rem">
                    <span style="color: black;">{{productStatus.views}}</span>
                  </div>
                </div>
                <div style="margin:0 1rem 0 0;">
                  <div class="procuct-price-title" style="width: 6.25rem;">{{ $t('数据展示.转换率') }}</div>
                  <div class="product-price" style="height: 2.5rem;line-height: 2.5rem">
                    <span style="color: black;">{{productStatus.conversion_rate}}</span>
                  </div>
                </div>
                <div style="margin:0 1rem 0 7rem;">
                  <div class="procuct-price-title">{{ $t('数据展示.Shopify商店') }}</div>
                  <div class="product-price" style="height: 2.5rem;line-height: 2.5rem">
                    <span style="color: black;">{{productStatus.shopify}}</span>
                  </div>
                </div>
                <div style="margin:0 1rem 0 0;">
                  <div class="procuct-price-title">{{ $t('数据展示.Ebay商店') }}</div>
                  <div class="product-price" style="height: 2.5rem;line-height: 2.5rem">
                    <span style="color: black;">{{productStatus.ebay}}</span>
                  </div>
                </div>
                <div style="margin:0 1rem 0 0;">
                  <div class="procuct-price-title" style="width: 6.25rem;">{{ $t('数据展示.AliExpress商店') }}</div>
                  <div class="product-price" style="height: 2.5rem;line-height: 2.5rem">
                    <span style="color: black;">{{productStatus.ali}}</span>
                  </div>
                </div>
                <div style="margin:0 1rem 0 0;">
                  <div class="procuct-price-title">{{ $t('数据展示.亚马逊商店') }}</div>
                  <div class="product-price" style="height: 2.5rem;line-height: 2.5rem">
                    <span style="color: black;">{{productStatus.amazon}}</span>
                  </div>
                </div>
              </div>
            </div>
            <el-divider></el-divider>
            <!-- 饼图 -->
            <div style="display: flex;">
                <!-- 饼图1 -->
                <div style="width: 35rem;height: 12.5rem;">
                    <div class="linechart-title" style="font-weight: 600;font-size: 0.88rem;margin-bottom: 2rem;">{{ $t('echarts.国家销量占比') }}</div>
                    <div v-if="isLogin">
                      <div v-show="isVip" style="display: flex;">
                        <!-- 图 -->
                        <div id="pieChart1" style="width: 12.5rem;height: 12.5rem;"></div>
                        <!-- 图例 列表 -->
                        <div style="width: 20rem;">
                          <!-- 表头 -->
                          <div style="display: flex;margin:-1rem 0 0 1.5rem;font-weight: 600;">
                            <div class="chart-table-title">{{ $t('国家') }}</div>
                            <div class="chart-table-title">{{ $t('占比') }}</div>
                            <div class="chart-table-title">{{ $t('销量') }}</div>
                          </div>
                          <el-divider style="margin: 0.15rem 0;"></el-divider>
                          <!-- 一行 -->
                          <div style="display:flex;margin:0.5rem 0 0 1.5rem;">
                            <div style="width: 0.63rem;height: 0.63rem;background-color: rgba(80, 135, 236, 1);border-radius: 50%;margin-top: 0.3rem;"></div>
                            <div class="chart-table-title" style="margin-left: 0.5rem;width: 8rem;">{{pieList1[0]?.name || ""}}</div>
                            <div class="chart-table-title" >{{pieList1[0]?.percent || '0.00%'}}</div>
                            <div class="chart-table-title" >{{pieList1[0]?.value || 0}}</div>
                          </div>
                          <div style="display:flex;margin:0 0 0 1.5rem;">
                            <div style="width: 0.63rem;height: 0.63rem;background-color:#68BBC4;border-radius: 50%;margin-top: 0.3rem;"></div>
                            <div class="chart-table-title" style="margin-left: 0.5rem;width: 8rem;">{{pieList1[1]?.name || ""}}</div>
                            <div class="chart-table-title" >{{pieList1[1]?.percent || '0.00%'}}</div>
                            <div class="chart-table-title" >{{pieList1[1]?.value || 0}}</div>
                          </div>
                          <div style="display:flex;margin:0 0 0 1.5rem;">
                            <div style="width: 0.63rem;height: 0.63rem;background-color:#58A55C;border-radius: 50%;margin-top: 0.3rem;"></div>
                            <div class="chart-table-title" style="margin-left: 0.5rem;width: 8rem;">{{pieList1[2]?.name || ""}}</div>
                            <div class="chart-table-title" >{{pieList1[2]?.percent || '0.00%'}}</div>
                            <div class="chart-table-title" >{{pieList1[2]?.value || 0}}</div>
                          </div>
                          <div style="display:flex;margin:0 0 0 1.5rem;">
                            <div style="width: 0.63rem;height: 0.63rem;background-color:#F2BD42;border-radius: 50%;margin-top: 0.3rem;"></div>
                            <div class="chart-table-title" style="margin-left: 0.5rem;width: 8rem;">{{pieList1[3]?.name || ""}}</div>
                            <div class="chart-table-title" >{{pieList1[3]?.percent || '0.00%'}}</div>
                            <div class="chart-table-title" >{{pieList1[3]?.value || 0}}</div>
                          </div>
                          <div style="display:flex;margin:0 0 0 1.5rem;">
                            <div style="width: 0.63rem;height: 0.63rem;background-color:#EE752F;border-radius: 50%;margin-top: 0.3rem;"></div>
                            <div class="chart-table-title" style="margin-left: 0.5rem;width: 8rem;">{{pieList1[4]?.name || ""}}</div>
                            <div class="chart-table-title" >{{pieList1[4]?.percent || '0.00%'}}</div>
                            <div class="chart-table-title" >{{pieList1[4]?.value || 0}}</div>
                          </div>
                          <div style="display:flex;margin:0 0 0 1.5rem;">
                            <div style="width: 0.63rem;height: 0.63rem;background-color:#e69d87;border-radius: 50%;margin-top: 0.3rem;"></div>
                            <div class="chart-table-title" style="margin-left: 0.5rem;width: 8rem;">{{pieList1[5]?.name || ""}}</div>
                            <div class="chart-table-title" >{{pieList1[5]?.percent || '0.00%'}}</div>
                            <div class="chart-table-title" >{{pieList1[5]?.value || 0}}</div>
                          </div>
                          <div style="display:flex;margin:0 0 0 1.5rem;">
                            <div style="width: 0.63rem;height: 0.63rem;background-color:#dd6b66;border-radius: 50%;margin-top: 0.3rem;"></div>
                            <div class="chart-table-title" style="margin-left: 0.5rem;width: 8rem;">{{pieList1[6]?.name || ""}}</div>
                            <div class="chart-table-title" >{{pieList1[6]?.percent || '0.00%'}}</div>
                            <div class="chart-table-title" >{{pieList1[6]?.value || 0}}</div>
                          </div>
                        </div>
                      </div>
                      <!-- 不是vip时显示 -->
                      <div v-show="!isVip">
                        <div class="can-not-show">{{ $t('没开vip') }}</div>
                        <div style="margin-top: 1rem;">
                          <el-button style="background-color:#165DFF;color:#fff;height: 2.5rem;" @click="shiftReserve()">{{ $t('没开vip.按钮') }}</el-button>
                        </div>
                      </div>
                    </div>
                    <div v-else>
                      <div style="display: flex;">
                        <!-- 图 -->
                        <div id="pieChart1" style="width: 12.5rem;height: 12.5rem;"></div>
                        <!-- 图例 列表 -->
                        <div style="width: 20rem;">
                          <!-- 表头 -->
                          <div style="display: flex;margin:-1rem 0 0 1.5rem;font-weight: 600;">
                            <div class="chart-table-title">{{ $t('国家') }}</div>
                            <div class="chart-table-title">{{ $t('占比') }}</div>
                            <div class="chart-table-title">{{ $t('销量') }}</div>
                          </div>
                          <el-divider style="margin: 0.15rem 0;"></el-divider>
                          <!-- 一行 -->
                          <div style="display:flex;margin:0.5rem 0 0 1.5rem;">
                            <div style="width: 0.63rem;height: 0.63rem;background-color: rgba(80, 135, 236, 1);border-radius: 50%;margin-top: 0.3rem;"></div>
                            <div class="chart-table-title" style="margin-left: 0.5rem;width: 8rem;">{{pieList1[0]?.name || ""}}</div>
                            <div class="chart-table-title" >{{pieList1[0]?.percent || '0.00%'}}</div>
                            <div class="chart-table-title" >{{pieList1[0]?.value || 0}}</div>
                          </div>
                          <div style="display:flex;margin:0 0 0 1.5rem;">
                            <div style="width: 0.63rem;height: 0.63rem;background-color:#68BBC4;border-radius: 50%;margin-top: 0.3rem;"></div>
                            <div class="chart-table-title" style="margin-left: 0.5rem;width: 8rem;">{{pieList1[1]?.name || ""}}</div>
                            <div class="chart-table-title" >{{pieList1[1]?.percent || '0.00%'}}</div>
                            <div class="chart-table-title" >{{pieList1[1]?.value || 0}}</div>
                          </div>
                          <div style="display:flex;margin:0 0 0 1.5rem;">
                            <div style="width: 0.63rem;height: 0.63rem;background-color:#58A55C;border-radius: 50%;margin-top: 0.3rem;"></div>
                            <div class="chart-table-title" style="margin-left: 0.5rem;width: 8rem;">{{pieList1[2]?.name || ""}}</div>
                            <div class="chart-table-title" >{{pieList1[2]?.percent || '0.00%'}}</div>
                            <div class="chart-table-title" >{{pieList1[2]?.value || 0}}</div>
                          </div>
                          <div style="display:flex;margin:0 0 0 1.5rem;">
                            <div style="width: 0.63rem;height: 0.63rem;background-color:#F2BD42;border-radius: 50%;margin-top: 0.3rem;"></div>
                            <div class="chart-table-title" style="margin-left: 0.5rem;width: 8rem;">{{pieList1[3]?.name || ""}}</div>
                            <div class="chart-table-title" >{{pieList1[3]?.percent || '0.00%'}}</div>
                            <div class="chart-table-title" >{{pieList1[3]?.value || 0}}</div>
                          </div>
                          <div style="display:flex;margin:0 0 0 1.5rem;">
                            <div style="width: 0.63rem;height: 0.63rem;background-color:#EE752F;border-radius: 50%;margin-top: 0.3rem;"></div>
                            <div class="chart-table-title" style="margin-left: 0.5rem;width: 8rem;">{{pieList1[4]?.name || ""}}</div>
                            <div class="chart-table-title" >{{pieList1[4]?.percent || '0.00%'}}</div>
                            <div class="chart-table-title" >{{pieList1[4]?.value || 0}}</div>
                          </div>
                          <div style="display:flex;margin:0 0 0 1.5rem;">
                            <div style="width: 0.63rem;height: 0.63rem;background-color:#e69d87;border-radius: 50%;margin-top: 0.3rem;"></div>
                            <div class="chart-table-title" style="margin-left: 0.5rem;width: 8rem;">{{pieList1[5]?.name || ""}}</div>
                            <div class="chart-table-title" >{{pieList1[5]?.percent || '0.00%'}}</div>
                            <div class="chart-table-title" >{{pieList1[5]?.value || 0}}</div>
                          </div>
                          <div style="display:flex;margin:0 0 0 1.5rem;">
                            <div style="width: 0.63rem;height: 0.63rem;background-color:#dd6b66;border-radius: 50%;margin-top: 0.3rem;"></div>
                            <div class="chart-table-title" style="margin-left: 0.5rem;width: 8rem;">{{pieList1[6]?.name || ""}}</div>
                            <div class="chart-table-title" >{{pieList1[6]?.percent || '0.00%'}}</div>
                            <div class="chart-table-title" >{{pieList1[6]?.value || 0}}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
                <div style="width: 15%;"></div>
                <!-- 饼图2 -->
                <div style="width: 35rem;height: 12.5rem;">
                    <div class="linechart-title" style="font-weight: 600;font-size: 0.88rem;margin-bottom: 2rem;">{{ $t('echarts.平台销量占比') }}</div>
                    <div v-if="isLogin">
                      <div v-show="isVip" style="display: flex;">
                        <div id="pieChart2" style="width: 12.5rem;height: 12.5rem;"></div>
                        <!-- 图例 列表 -->
                        <div style="width: 20rem;margin-left: 3rem;">
                          <!-- 表头 -->
                          <div style="display: flex;margin:0.5rem 0 0 1.5rem;font-weight: 600;">
                            <div class="chart-table-title">{{ $t('平台') }}</div>
                            <div class="chart-table-title">{{ $t('占比') }}</div>
                            <div class="chart-table-title">{{ $t('销量') }}</div>
                          </div>
                          <el-divider style="margin: 0.15rem 0;"></el-divider>
                          <!-- 一行 -->
                          <div style="display:flex;margin:0.5rem 0 0 1.5rem;">
                            <div style="width: 0.63rem;height: 0.63rem;background-color: #D97559;border-radius: 50%;margin-top: 0.3rem;"></div>
                            <div class="chart-table-title" style="margin-left: 0.5rem;">{{ pieList2[0]?.name || "" }}</div>
                            <div class="chart-table-title" >{{ pieList2[0]?.percent || "0.00%"}}</div>
                            <div class="chart-table-title" >{{ pieList2[0]?.value || 0}}</div>
                          </div>
                          <div style="display:flex;margin:0 0 0 1.5rem;">
                            <div style="width: 0.63rem;height: 0.63rem;background-color:#E4C477;border-radius: 50%;margin-top: 0.3rem;"></div>
                            <div class="chart-table-title" style="margin-left: 0.5rem;">{{ pieList2[1]?.name || ""}}</div>
                            <div class="chart-table-title" >{{ pieList2[1]?.percent || "0.00%"}}</div>
                            <div class="chart-table-title" >{{ pieList2[1]?.value || 0}}</div>
                          </div>
                          <div style="display:flex;margin:0 0 0 1.5rem;">
                            <div style="width: 0.63rem;height: 0.63rem;background-color:#DAA67B;border-radius: 50%;margin-top: 0.3rem;"></div>
                            <div class="chart-table-title" style="margin-left: 0.5rem;">{{ pieList2[2]?.name || "" }}</div>
                            <div class="chart-table-title" >{{ pieList2[2]?.percent || "0.00%"}}</div>
                            <div class="chart-table-title" >{{ pieList2[2]?.value || 0}}</div>
                          </div>
                          <div style="display:flex;margin:0 0 0 1.5rem;">
                            <div style="width: 0.63rem;height: 0.63rem;background-color:#4E9C8F;border-radius: 50%;margin-top: 0.3rem;"></div>
                            <div class="chart-table-title" style="margin-left: 0.5rem;">{{ pieList2[3]?.name || ""}}</div>
                            <div class="chart-table-title" >{{ pieList2[3]?.percent || "0.00%" }}</div>
                            <div class="chart-table-title" >{{ pieList2[3]?.value || 0}}</div>
                          </div>
                        </div>
                      </div>
                      <div v-show="!isVip">
                        <div class="can-not-show">{{ $t('没开vip') }}</div>
                        <div style="margin-top: 1rem;">
                          <el-button style="background-color:#165DFF;color:#fff;height: 2.5rem;" @click="shiftReserve()">{{ $t('没开vip.按钮') }}</el-button>
                        </div>
                      </div>
                    </div>
                    <div v-else>
                      <div style="display: flex;">
                        <div id="pieChart2" style="width: 12.5rem;height: 12.5rem;"></div>
                        <!-- 图例 列表 -->
                        <div style="width: 20rem;margin-left: 3rem;">
                          <!-- 表头 -->
                          <div style="display: flex;margin:0.5rem 0 0 1.5rem;font-weight: 600;">
                            <div class="chart-table-title">{{ $t('平台') }}</div>
                            <div class="chart-table-title">{{ $t('占比') }}</div>
                            <div class="chart-table-title">{{ $t('销量') }}</div>
                          </div>
                          <el-divider style="margin: 0.15rem 0;"></el-divider>
                          <!-- 一行 -->
                          <div style="display:flex;margin:0.5rem 0 0 1.5rem;">
                            <div style="width: 0.63rem;height: 0.63rem;background-color: #D97559;border-radius: 50%;margin-top: 0.3rem;"></div>
                            <div class="chart-table-title" style="margin-left: 0.5rem;">{{ pieList2[0]?.name || "" }}</div>
                            <div class="chart-table-title" >{{ pieList2[0]?.percent || "0.00%"}}</div>
                            <div class="chart-table-title" >{{ pieList2[0]?.value || 0}}</div>
                          </div>
                          <div style="display:flex;margin:0 0 0 1.5rem;">
                            <div style="width: 0.63rem;height: 0.63rem;background-color:#E4C477;border-radius: 50%;margin-top: 0.3rem;"></div>
                            <div class="chart-table-title" style="margin-left: 0.5rem;">{{ pieList2[1]?.name || ""}}</div>
                            <div class="chart-table-title" >{{ pieList2[1]?.percent || "0.00%"}}</div>
                            <div class="chart-table-title" >{{ pieList2[1]?.value || 0}}</div>
                          </div>
                          <div style="display:flex;margin:0 0 0 1.5rem;">
                            <div style="width: 0.63rem;height: 0.63rem;background-color:#DAA67B;border-radius: 50%;margin-top: 0.3rem;"></div>
                            <div class="chart-table-title" style="margin-left: 0.5rem;">{{ pieList2[2]?.name || "" }}</div>
                            <div class="chart-table-title" >{{ pieList2[2]?.percent || "0.00%"}}</div>
                            <div class="chart-table-title" >{{ pieList2[2]?.value || 0}}</div>
                          </div>
                          <div style="display:flex;margin:0 0 0 1.5rem;">
                            <div style="width: 0.63rem;height: 0.63rem;background-color:#4E9C8F;border-radius: 50%;margin-top: 0.3rem;"></div>
                            <div class="chart-table-title" style="margin-left: 0.5rem;">{{ pieList2[3]?.name || ""}}</div>
                            <div class="chart-table-title" >{{ pieList2[3]?.percent || "0.00%" }}</div>
                            <div class="chart-table-title" >{{ pieList2[3]?.value || 0}}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
            </div>
           <!-- 折线图 -->
            <div style="display: flex;margin-top: 6rem;">
                 <!-- 产品销售 折线图-->
                <div>
                    <div style="display: flex;margin-top: 0.5rem;" class="linechart-title">
                        <div style="font-weight: 600;font-size: 0.88rem;">{{ $t('echarts.销量趋势') }}</div>
                    </div>
                    <div v-if="isLogin">
                      <div v-show="isVip" id="lineChart" style="width: 35rem;height: 12.5rem;"></div>
                      <div v-show="!isVip">
                        <div class="can-not-show">{{ $t('没开vip') }}</div>
                        <div style="margin-top: 1rem;">
                          <el-button style="background-color:#165DFF;color:#fff;height: 2.5rem;" @click="shiftReserve()">{{ $t('没开vip.按钮') }}</el-button>
                        </div>
                      </div>
                    </div>
                    <div v-else>
                      <div id="lineChart" style="width: 35rem;height: 12.5rem;"></div>
                    </div>
                </div>
                <div style="width: 15%;"></div>
                <!-- 排名  折线图-->
                <div>
                    <div style="display: flex;margin-top: 0.5rem;" class="linechart-title">
                        <!-- <div style="font-weight: 600;font-size: 0.88rem;">{{ $t('echarts.排名趋势') }}</div> -->
                        <div style="font-weight: 600;font-size: 0.88rem;">
                            <span>{{ $t('echarts.排名趋势1') }}</span>
                            <!-- <span>{{ lineChartCate}}"</span> -->
                        </div>
                    </div>
                    <div v-if="isLogin">
                      <div v-show="isVip" id="lineChart2" style="width: 35rem;height: 12.5rem;"></div>
                      <div v-show="!isVip">
                        <div class="can-not-show">{{ $t('没开vip') }}</div>
                        <div style="margin-top: 1rem;">
                          <el-button style="background-color:#165DFF;color:#fff;height: 2.5rem;" @click="shiftReserve()">{{ $t('没开vip.按钮') }}</el-button>
                        </div>
                      </div>
                    </div>
                    <div v-else>
                      <div id="lineChart2" style="width: 35rem;height: 12.5rem;"></div>
                    </div>
                </div>
            </div>    
        </div>
        <!-- 列表数据 -->
        <div class="list-card" id="dataList">
            <div class="linechart-title" style="font-weight: 600;font-size: 0.88rem;">{{ $t('数据列表') }}</div>
            <!-- 列表 以前的 -->
            <!-- <div v-show="isVip">
                <el-table :data="dataTable" size="small" :header-cell-style="{background:'#f2f3f8',color:'#101010',height:'40px'}" :row-style="{height:'50px'}">
                    <el-table-column prop="log_date" :label="labelList[0]" />
                    <el-table-column prop="sale_price" :label="labelList[1]" />
                    <el-table-column prop="shipping_fee" :label="labelList[2]" />
                    <el-table-column prop="retail_price" :label="labelList[3]" />
                    <el-table-column prop="profit" :label="labelList[4]" />
                    <el-table-column prop="sale_count" :label="labelList[5]" ></el-table-column>
                    <el-table-column prop="revenue_sale" :label="labelList[6]" ></el-table-column>
                    <el-table-column prop="views" :label="labelList[7]" ></el-table-column>
                    <el-table-column prop="conversion_rate" :label="labelList[8]" ></el-table-column>
                    <el-table-column prop="rank" :label="labelList[9]" ></el-table-column>
                </el-table>
            </div> -->
          <div v-if="isLogin">
            <!-- 按国家 列表 -->
            <div v-show="isVip">
              <el-table :data="dataTable" size="small" :header-cell-style="{background:'#f2f3f8',color:'#101010',height:'40px'}" :row-style="{height:'50px'}">
                <el-table-column prop="log_date" :label="labelList[0]"/>
                <el-table-column prop="FR" :label="labelList[10]"/>
                <el-table-column prop="IT" :label="labelList[11]"/>
                <el-table-column prop="PT" :label="labelList[12]"/>
                <el-table-column prop="ES" :label="labelList[13]"/>
                <el-table-column prop="DE" :label="labelList[14]"></el-table-column>
                <el-table-column prop="UK" :label="labelList[15]" width="120"></el-table-column>
                <el-table-column prop="EUR" :label="labelList[16]" width="120"></el-table-column>
                <el-table-column prop="sale_count" :label="labelList[5]" width="100"></el-table-column>
                <el-table-column prop="views" :label="labelList[7]"></el-table-column>
                <el-table-column prop="conversion_rate" :label="labelList[8]" width="120"></el-table-column>
                <el-table-column prop="rank" :label="labelList[9]"></el-table-column>
              </el-table>
            </div>
            <div v-show="!isVip">
              <el-table size="small" :header-cell-style="{background:'#f2f3f8',color:'#101010'}">
                <el-table-column :label="labelList[0]" />
                <el-table-column :label="labelList[10]" />
                <el-table-column :label="labelList[11]" />
                <el-table-column :label="labelList[12]" />
                <el-table-column :label="labelList[13]" />
                <el-table-column :label="labelList[14]" ></el-table-column>
                <el-table-column :label="labelList[15]" ></el-table-column>
                <el-table-column :label="labelList[16]" ></el-table-column>
                <el-table-column :label="labelList[5]" ></el-table-column>
                <el-table-column :label="labelList[7]" ></el-table-column>
                <el-table-column :label="labelList[8]"></el-table-column>
                <el-table-column :label="labelList[9]"></el-table-column>
              </el-table>
              <!-- 不是vip时显示 -->
              <!--                <div v-show="!isVip">-->
              <!--                    <div class="can-not-show" style="width: 72.5rem;">{{ $t('没开vip') }}</div>-->
              <!--                    <div style="margin-top: 1rem;margin-left: 33rem;">-->
              <!--                        <el-button style="background-color:#165DFF;color:#fff;height: 2.5rem;" @click="shiftReserve()">{{ $t('没开vip.按钮') }}</el-button>-->
              <!--                    </div>-->
              <!--                </div>-->
            </div>
          </div>
            <div v-else>
              <!-- 按国家 列表 -->
              <div>
                <el-table :data="dataTable" size="small" :header-cell-style="{background:'#f2f3f8',color:'#101010',height:'40px'}" :row-style="{height:'50px'}">
                  <el-table-column prop="log_date" :label="labelList[0]"/>
                  <el-table-column prop="FR" :label="labelList[10]"/>
                  <el-table-column prop="IT" :label="labelList[11]"/>
                  <el-table-column prop="PT" :label="labelList[12]"/>
                  <el-table-column prop="ES" :label="labelList[13]"/>
                  <el-table-column prop="DE" :label="labelList[14]"></el-table-column>
                  <el-table-column prop="UK" :label="labelList[15]" width="120"></el-table-column>
                  <el-table-column prop="EUR" :label="labelList[16]" width="120"></el-table-column>
                  <el-table-column prop="sale_count" :label="labelList[5]" width="100"></el-table-column>
                  <el-table-column prop="views" :label="labelList[7]"></el-table-column>
                  <el-table-column prop="conversion_rate" :label="labelList[8]" width="120"></el-table-column>
                  <el-table-column prop="rank" :label="labelList[9]"></el-table-column>
                </el-table>
              </div>
            </div>
            <!-- 分页 -->
            <div v-show="isVip" style="width: 26rem;margin: 1.5rem 0 1rem 65%;">
                <el-pagination :background="background" layout="total,prev, pager, next" :total="total" size="small" 
                @current-change="handleCurrentChange()" v-model:current-page="current" hide-on-single-page/>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import {getUser} from '../apis/user'
import {getProductDetail,getSaleNumber,getSaleList,getLineChart,getLineChart2,getPieChart1,getPieChart2} from '../apis/detail'
import { ElMessage } from 'element-plus';
    export default{
        name: 'MyComponent',
        data(){
            return {
                // 是否显示空状态
                isempty:false,
                emptyimg:'https://via.placeholder.com/150',
                // 切换分段器时，是否显示loading
                isStats:false,
                currentColor:0,
                carouselIndex :0,
                isVip:false,
                goods_id:0,
                country:'',
                // 产品列表
                productInfo:{},
                // 颜色列表
                colorList:[
                    {name:this.$t('绿色'),select_color:'color-btn'},
                ],
                // 详情名列表
                detailList:[this.$t('商品信息.详情'),this.$t('商品信息.领口'),this.$t('商品信息.样式'),this.$t('商品信息.类型')],
                // suks数组 加了样式属性 全部 限制5个
                imgList:[{banners:null}],
                currentImg:0,
                // 未开会员时显示的分数
                score1:0,
                // 接口数据为0时显示的分数
                score2:'5.00',
                options1:[this.$t('分段器.基础分析'),this.$t('分段器.数据列表')],
                value1:this.$t('分段器.基础分析'),
                // this.$t('分段器.30天')
                options2:[this.$t('分段器.昨日'),this.$t('分段器.7天'),],
                value2:this.$t('分段器.7天'),
                // 表格表头
                labelList:[
                    this.$t('Date'),this.$t('商品详情.购买价格'),this.$t('商品详情.运费'),this.$t('商品详情.零售价'),this.$t('商品详情.利润'),
                    this.$t('数据展示.销售量'),this.$t('数据展示.销售收入'),this.$t('数据展示.视域'),this.$t('数据展示.转换率'),this.$t('Rank'),
                    this.$t('France'),this.$t('Italy'),this.$t('Portugal'),this.$t('Spain'),this.$t('Germany'),this.$t('United Kingdom'),this.$t('European Union'),
                ],
                dataTable:[
                    {
                        "log_date": "",
                        "spu": "",
                        "sale_count": null,
                        "sale_count_diff": null,
                        "revenue_sale": "",
                        "revenue_retail": "",
                        "shipping_fee": "",
                        "profit_sale": "",
                        "profit_retail": "",
                        "conversion_rate": "",
                        "rank": "",
                        "views": "",
                        "sale_price": "",
                        "retail_price": "",
                        "profit": null,
                        "FR": 0,
                        "IT": 0,
                        "PT": 0,
                        "ES": 0,
                        "UK": 0,
                        "DE": 0,
                        "EUR": 0
                    }
                ],
                // 当前页
                current:1,
                page:1,
                pageSize:10,
                total:0,
                background:true,
                tagList:[],
                days:7,
                productStatus:{
                    "total_sale_count": "0",
                    "revenue": "0",
                    "total_sale_count_str": "0",
                    "revenue_str": "0",
                    "views": "0",
                    "conversion_rate": "0",
                    "ali": 0,
                    "ebay": 0,
                    "shopify": 0,
                    "amazon": 0
                },
                lineChart1:null,
                lineChart2:null,
                pieChart1:null,
                pieChart2:null,
                lineDataX:[],
                lineDataY:[],
                lineDataX2:[],
                lineDataY2:[],
                pieData1:[
                    {value:null,name:null},
                    {value:null,name:null},
                    {value:null,name:null},
                    {value:null,name:null},
                    {value:null,name:null},
                ],
                pieList1:[
                    {name:null,percent:null,value:null},
                    {name:null,percent:null,value:null},
                    {name:null,percent:null,value:null},
                    {name:null,percent:null,value:null},
                    {name:null,percent:null,value:null},
                ],
                pieData2:[],
                pieList2:[
                    {name:null,percent:null,value:null},
                    {name:null,percent:null,value:null},
                    {name:null,percent:null,value:null},
                    {name:null,percent:null,value:null},
                ],
                lineChartCate:'',
                userInfo:{
                "name": "",
                "invite_code": "",
                "email": "",
                "subscription": "",
                "expired_at": "",
                "is_active": false,
                "register_date":''
              },
                isLogin:false
            }
        },
        created(){
            this.$gtm.trackView({ page: this.$route.path,gtm: this.$route.meta.gtm });
            const id = this.$route.query.id;
            const country = this.$route.query.country
            this.goods_id = id
            this.country = country
            // 取token 判断是否是登录状态
            const token = localStorage.getItem('token')
            this.isLogin = !!token;
        },
        mounted(){
            // const additionalData = this.$route.meta.gtmAdditionalEventData || {};
            this.$gtm.trackView({ page: this.$route.path,gtm: this.$route.meta.gtm });
            this.lineChart1 = echarts.init(document.getElementById('lineChart'));
            this.lineChart2 = echarts.init(document.getElementById('lineChart2'));
            this.pieChart1 = echarts.init(document.getElementById('pieChart1'));
            this.pieChart2 = echarts.init(document.getElementById('pieChart2'));
            // 初始化时加载7天的数据
            this.segmentChange2(this.value2)
            this.getProductList()
            // this.getSaleStatus()
            this.getProductSaleList()
            this.getLineData()
            this.getLineData2()
            // this.getPieData1()
            // this.getPieData2()
            this.drawLine();
            this.drawLine2();
            this.drawPie1();
            this.drawPie2()

            // let a = JSON.parse(localStorage.getItem('myinfo'))
            // if(a.is_active!==false){
            //     this.isVip = true
            // }

            try {
              // 获取并解析存储在 localStorage 中的 myinfo 数据
              const jsonString = localStorage.getItem('myinfo');

              // 检查 jsonString 是否存在且不是空字符串
              if (jsonString) {
                const a = JSON.parse(jsonString);
                // 明确地检查 is_active 是否为 true
                if (a && typeof a.is_active === 'boolean' && a.is_active) {
                  this.isVip = true;
                } else {
                  this.isVip = false;
                }
              } else {
                this.getUserInfo()
                // console.warn('No "myinfo" found in localStorage.');
              }
            } catch (error) {
              console.error('Error parsing "myinfo" from localStorage:', error);
              // this.isVip = false; // 设置默认值或根据业务逻辑处理
            }


            // 页面加载后三秒钟设置 isempty 为 true
            // setTimeout(() => {
            //     this.isempty = true;
            // }, 1000);
        },
        methods:{
            // 获取用户信息
            getUserInfo(){
              getUser().then((res)=>{
                if(res.code == 200 && res.status == 1){
                  console.log(res)
                  this.userInfo = res.data
                  localStorage.setItem('myinfo',JSON.stringify(this.userInfo))
                  this.isVip = this.userInfo.is_active;
                }
              })
            },
            // 获取商品信息
            getProductList(){
                getProductDetail({goods_id:this.goods_id,country:this.country}).then((res)=>{
                    if(res.code == 200 && res.status ==1){
                        this.productInfo = res.data.goods
                        // 初始化 imgList
                        this.imgList = res.data.goods.skus.map((sku, index) => ({
                            ...sku,
                            select_img: index === 0 ? 'selected-img' : 'aside-img',
                            select_color: index === 0 ? 'color-btn-click' : 'color-btn'
                        }));
                        // 过滤 banners 数组中的空值
                        this.imgList.forEach(sku => {
                            sku.banners = sku.banners.filter(item => {
                                return item != null && item !== ''; // 检查是否为空值
                            });
                        });
                        // 处理 ranks 数组
                        for(let i in res.data.goods.ranks){
                            this.tagList.push(res.data.goods.ranks[i])
                        }
                        this.tagList = this.tagList.slice(0,3)
                        // 默认显示第一个颜色的第一个图片
                        this.carouselIndex = 0;
                        this.currentColor = 0;
                        this.isempty = true;
                    }
                })
            },
            // 获取商品统计数字
            getSaleStatus(){
                getSaleNumber({goods_id:this.goods_id,days:this.days}).then((res)=>{
                    if(res.code ==200 && res.status == 1){
                        this.productStatus = res.data
                        this.isStats=true
                    }
                }).catch((error)=>{
                    console.log('响应商品status失败:', error);
                    ElMessage({
                        message:this.$t('响应商品status失败'),
                        grouping:true,
                        type:'error'
                    })
                    this.isStats=true
                })
            },
            // 获取底部商品销售数据
            getProductSaleList(){
                getSaleList({goods_id:this.goods_id,page:this.current,pageSize:this.pageSize,country:this.country}).then((res)=>{
                    if(res.code ==200 && res.status == 1){
                        this.dataTable = res.data.lists
                        this.total = res.data.total
                    }
                })
            },
            // 获取折线图信息
            getLineData(){
                getLineChart(this.goods_id).then((res)=>{
                    if(res.code ==200 && res.status == 1){
                        this.lineDataX = res.data.x
                        this.lineDataY = res.data.y
                    }
                    this.updateChart1()
                })
            },
            getLineData2(){
                getLineChart2(this.goods_id).then((res)=>{
                    if(res.code ==200 && res.status == 1){
                        this.lineDataX2 = res.data.x
                        this.lineDataY2 = res.data.y
                        this.lineChartCate = res.data.cate
                    }
                    this.updateChart2()
                }).catch((error) => {
                    // 处理其他类型的错误
                    console.log('请求失败:', error);
                    this.lineDataX2 = [];
                    this.lineDataY2 = [];
                    this.updateChart2();
                });
            },
            // 更新折线图
            updateChart1() {
                this.lineChart1.setOption({
                    xAxis: {
                    data: this.lineDataX
                    },
                    series: [
                    {
                        name: this.$t('销售额'),
                        data: this.lineDataY
                    }
                    ]
                });
            },
            updateChart2() {
                this.lineChart2.setOption({
                    xAxis: {
                    data: this.lineDataX2
                    },
                    series: [
                    {
                        name: this.$t('折线图.排名'),
                        data: this.lineDataY2
                    }
                    ]
                });
            },
            // 获取国家饼图信息
            getPieData1(){
                getPieChart1({goods_id: this.goods_id, days: this.days}).then((res) => {
                    if(res.code == 200 && res.status == 1){
                        this.pieList1 = res.data.lists
                        if (!this.pieData1 || !Array.isArray(this.pieData1)) {
                            this.pieData1 = [];
                        }
                        res.data.lists.forEach((item, index) => {
                            if (!this.pieData1[index]) {
                                this.pieData1[index] = {};
                            }
                            this.pieData1[index].value = item.value;
                            this.pieData1[index].name = item.name;
                        });
                        // 获取前五个数据
                        // this.pieList1 = this.pieList1.slice(0,5)
                        // this.pieData1 = this.pieData1.slice(0,5)
                        this.updateChart3();
                    }
                }).catch((error) => {
                    // 处理其他类型的错误
                    console.log('响应国家饼图数据失败:', error);
                    ElMessage({
                        message:this.$t('响应饼图数据失败'),
                        grouping:true,
                        type:'error'
                    })
                    this.pieData1 = [];
                    this.pieList1 = [];
                    this.updateChart3();
                });
            },
            //获取平台饼图信息
            getPieData2(){
                getPieChart2({goods_id:this.goods_id,days:this.days}).then((res)=>{
                    if(res.code == 200 && res.status == 1){
                        this.pieData2=res.data.pie
                        console.log(this.pieData2)
                        this.pieList2 = res.data.table
                    }
                    this.updateChart4()
                })
            },
            // 更新饼图
            updateChart3() {
                this.pieChart1.setOption({
                    series: [
                        {
                            data: this.pieData1
                        }
                    ],
                });
            },
            updateChart4() {
                this.pieChart2.setOption({
                    series: [
                        {
                            data: this.pieData2
                        }
                    ],
                });
            },
            drawLine(){
                // 基于准备好的dom，初始化echarts实例
                // var myChart = echarts.init(document.getElementById('lineChart'));
                // window.addEventListener("resize", () => { myChart.resize();});
                this.lineChart1.setOption({
                    title: {
                        text: ''
                    },
                    tooltip: {
                        // trigger:'axis',
                        // formatter: function(params) {
                        //     var result = '';
                        //     for (var i = 0; i < params.length; i++) {
                        //         result += params[i].name + '<br />';
                        //         result += params[i].seriesName + ': ' + params[i].value + '<br />';
                        //     }
                        //     return result;
                        // },
                        // axisPointer: { type: 'cross' }
                    },
                    xAxis: {
                        type:'category',
                        data: []
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                        name: this.$t('销售额'),
                        type: 'line',
                        data: [],
                        smooth: true,
                        areaStyle: {}
                        }
                    ],
                    //整体边距
                    grid: {
                        x: 80,
                        y: 40,
                        x2: 40,
                        y2: 40,
                    },
                });
            },
            drawLine2(){
                // window.addEventListener("resize", () => { myChart.resize();});
                this.lineChart2.setOption({
                    title: {
                        text: ''
                    },
                    tooltip: {
                        // trigger:'axis',
                        // formatter: function(params) {
                        //     var result = '';
                        //     for (var i = 0; i < params.length; i++) {
                        //         result += params[i].name + '<br />';
                        //         result += params[i].seriesName + ': ' + params[i].value + '<br />';
                        //     }
                        //     return result;
                        // },
                        // axisPointer: { type: 'cross' }
                    },
                    xAxis: {
                        type:'category',
                        data: [],
                        axisLine:{ // 隐藏X轴
                            show: false
                        },
                        axisTick:{ // 隐藏刻度线
                            show: false,
                        },
                    },
                    yAxis: {
                        type: 'value',
                        inverse:true,
                        min:1,
                        max:100
                    },
                    series: [
                        {
                        name: this.$t('折线图.排名'),
                        type: 'line',
                        data: [],
                        // smooth: true,
                        
                        }
                    ],
                    //整体边距
                    grid: {
                        x: 80,
                        y: 40,
                        x2: 40,
                        y2: 40,
                    },
                });
            },
            drawPie1(){
                // window.addEventListener("resize", () => { pieChart1.resize();});
                this.pieChart1.setOption({
                    series:[
                        {
                            type: 'pie',
                            label: {
                                show: false
                            },
                            data:[
                                // {value: 50, name: '欧洲'},
                            ],
                            itemStyle: {
                                borderRadius: 4
                            },
                            radius: '90%',
                            center: ['50%', '50%'],
                            // 此系列调色盘。
                            color: [
                                '#5087EC',
                                '#68BBC4',
                                '#58A55C',
                                '#F2BD42',
                                '#EE752F',
                                '#e69d87',
                                '#dd6b66',
                            ],
                        }
                    ],
                    // legend:{
                    //         // shoe:true,
                    //         orient:'vertical',
                    //         left:260,
                    //         top: 50,
                    //         itemGap: 10,
                    //         align: 'left',
                    //         data:['欧洲','法国','英国','德国','其他'],
                    //         x:'right',
                    //         icon :'circle',
                    //         itemWidth:10,
                    //         itemHeight :10,
                    //         formatter: function (name) {
                    //             // 获取当前图表的配置选项
                    //             const option = pieChart1.getOption();
                    //             const data = option.series[0].data;
                    //             // console.log(data, 'data')
                    //             let total = 0
                    //             let tarValue
                    //             // 计算总和和目标值
                    //             for (let i = 0; i < data.length; i++) {
                    //                 total += data[i].value
                    //                 if (data[i].name == name) {
                    //                     tarValue = data[i].value
                    //                 }
                    //             }
                    //             // 确保 tarValue 被正确赋值
                    //             if (tarValue === undefined) {
                    //                 tarValue = 0; // 如果找不到匹配项，则设置为0
                    //             }
                    //             let v = tarValue
                    //             let p = Math.round((tarValue / total) * 100) //占比
                    //             //5.四舍五入保留2位小数（不够位数，则用0替补）  
                    //             function keepTwoDecimalFull(num) {
                    //                 var result = parseFloat(num);
                    //                 if (isNaN(result)) {
                    //                     alert('传递参数错误，请检查！');
                    //                     return false;
                    //                 }
                    //                 result = Math.round(num * 100) / 100;
                    //                 var s_x = result.toString(); //将数字转换为字符串
                    //                 var pos_decimal = s_x.indexOf('.'); //小数点的索引值
                    //                 // 当整数时，pos_decimal=-1 自动补0  
                    //                 if (pos_decimal < 0) {
                    //                     pos_decimal = s_x.length;
                    //                     s_x += '.';
                    //                 }
                    //                 // 当数字的长度< 小数点索引+2时，补0  
                    //                 while (s_x.length <= pos_decimal + 2) {
                    //                     s_x += '0';
                    //                 }
                    //                 return s_x;
                    //             }
                    //             let pen = keepTwoDecimalFull(p)
                    //             return `${name}        ${pen}%       ${v}`
                    //         },
                    //     },
                })
            },
            drawPie2(){
                // window.addEventListener("resize", () => { pieChart2.resize();});
                this.pieChart2.setOption({
                    series:[
                        {
                            type: 'pie',
                            label: {
                                show: false
                            },
                            data:[
                                // {value: 25, name: 'Shopify'},
                                // {value: 25, name: 'AliExpress'},
                                // {value: 40, name: 'ebay'},
                                // {value: 10, name: 'amazon'},
                            ],
                            // 圆角
                            itemStyle: {
                                borderRadius: 5,
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            radius: ['60%','90%'],
                            center: ['50%', '50%'],
                            // 此系列调色盘。
                            color: [
                                '#D97559',
                                '#E4C477',
                                '#DAA67B',
                                '#4E9C8F',
                            ],
                        }
                    ],
                    // legend:{
                    //         // shoe:true,
                    //         orient:'vertical',
                    //         left:260,
                    //         top: 50,
                    //         itemGap: 10,
                    //         align: 'left',
                    //         data:['Shopify','AliExpress','ebay','amazon'],
                    //         x:'right',
                    //         icon :'circle',
                    //         itemWidth:10,
                    //         itemHeight :10,
                    //         formatter: function (name) {
                    //             // 获取当前图表的配置选项
                    //             const option = pieChart2.getOption();
                    //             const data = option.series[0].data;
                    //             // console.log(data, 'data')
                    //             let total = 0
                    //             let tarValue
                    //             // 计算总和和目标值
                    //             for (let i = 0; i < data.length; i++) {
                    //                 total += data[i].value
                    //                 if (data[i].name == name) {
                    //                     tarValue = data[i].value
                    //                 }
                    //             }
                    //             // 确保 tarValue 被正确赋值
                    //             if (tarValue === undefined) {
                    //                 tarValue = 0; // 如果找不到匹配项，则设置为0
                    //             }
                    //             let v = tarValue
                    //             let p = Math.round((tarValue / total) * 100) //占比
                    //             //5.四舍五入保留2位小数（不够位数，则用0替补）  
                    //             function keepTwoDecimalFull(num) {
                    //                 var result = parseFloat(num);
                    //                 if (isNaN(result)) {
                    //                     alert('传递参数错误，请检查！');
                    //                     return false;
                    //                 }
                    //                 result = Math.round(num * 100) / 100;
                    //                 var s_x = result.toString(); //将数字转换为字符串
                    //                 var pos_decimal = s_x.indexOf('.'); //小数点的索引值
                    //                 // 当整数时，pos_decimal=-1 自动补0  
                    //                 if (pos_decimal < 0) {
                    //                     pos_decimal = s_x.length;
                    //                     s_x += '.';
                    //                 }
                    //                 // 当数字的长度< 小数点索引+2时，补0  
                    //                 while (s_x.length <= pos_decimal + 2) {
                    //                     s_x += '0';
                    //                 }
                    //                 return s_x;
                    //             }
                    //             let pen = keepTwoDecimalFull(p)
                    //             return `${name}        ${pen}%       ${v}`
                    //         },
                    //     },
                })
            },
            // 返回
            backLast(){
                // this.$router.back()
                const returnUrl = this.$route.query.returnUrl;
                if (returnUrl) {
                    window.location.href = returnUrl; // 返回到记录的 URL
                } else {
                    alert('Unable to return to the main page, please manually return.');
                }
            },
            // 选中颜色
            colorSelect(i){
                // 更新所有颜色按钮的状态
                for(var n in this.imgList){
                    this.imgList[n].select_color = 'color-btn'
                }
                this.imgList[i].select_color = 'color-btn-click'
                // 更新当前颜色索引
                this.currentColor = i;
                // 切换轮播图到当前颜色的第一个图片
                this.carouselIndex = 0;
                this.$refs.carousel.setActiveItem(this.carouselIndex);
                // this.currentImg = i-1
                // this.changeImg(i)
            },
            changeimg(index) {
                this.carouselIndex = index;
                // 使用 this.$nextTick：确保 DOM 更新完成后立即修改样式
                this.$nextTick(() => {
                    this.$refs.carousel.setActiveItem(this.carouselIndex);
                });
            },
            // 轮播图改变
            changeImg(index) {
                // console.log(old)
                this.carouselIndex = index;
            },
            // 分段器1切换时 滚动到相应位置
            segmentChange1(e){
                if(e == this.$t('分段器.数据列表')){
                    const element = document.querySelector('#dataList');
                    if(element){
                        // 调用 element.scrollIntoView 方法来平滑滚动到目标元素的位置
                        element.scrollIntoView({ behavior: 'smooth' });
                    }
                }else if (e == this.$t('分段器.基础分析')){
                    const element = document.querySelector('#dataCard');
                    if(element){
                        // 调用 element.scrollIntoView 方法来平滑滚动到目标元素的位置
                        element.scrollIntoView({ behavior: 'smooth' });
                    }
                }
            },
            segmentChange2(e){
                if(e == this.$t('分段器.昨日')){
                    this.days = 1
                    this.getSaleStatus()
                    this.getPieData1()
                    this.getPieData2()
                }else if(e== this.$t('分段器.7天')){
                    this.days = 7
                    this.getSaleStatus()
                    this.getPieData1()
                    this.getPieData2()
                }
                // this.isStats=false
            },
            handleCurrentChange(){
                this.getProductSaleList()
            },
            // 跳转到订阅页面
            shiftReserve(){
                this.$router.push('/subscribe/price')
            },
        },
    }
</script>
<style lang="scss" scoped>
// :root{ --el-rate-fill-color: #FA633E 100%; }
// 评分颜色修改
::v-deep .el-rate .el-rate__icon.is-active {
    color: #FA633E;
}
::v-deep .el-rate{
    --el-rate-fill-color: #FA633E;
}
.detail-card{
    margin-left: 3rem;
    margin-top: 1rem;
    padding: 1rem;
    box-sizing: border-box;
    min-width: 75rem;
    min-height: 25.63rem;
    border-radius: 0.31rem;
    background-color: rgba(255, 255, 255, 1);
    .detail-card-title{
        width: 19.38rem;
        height: 1.88rem;
        line-height: 1.88rem;
        color: rgba(16, 16, 16, 1);
        font-size: 1.25rem;
        font-weight: 600;
        text-align: left;
        font-family: AlibabaPuHui-medium;
    }
  .back-btn{
    width: 5rem;
    height: 1.88rem;
    border-radius: 0.25rem;
    background-color: rgba(22, 93, 255, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 0.88rem;
    text-align: center;
    font-family: Microsoft Yahei;
  }
  .product-title{
    width: 39.38rem;
    max-height: 3.13rem;
    line-height: 1.5rem;
    font-size: 0.88rem;
    text-align: left;
    font-family: AlibabaPuHui-regular;
  }
  .tag-word{
    margin-left: 0.3rem;
    // max-width: 11rem;
    height: 1.25rem;
    line-height: 1.25rem;
    color: rgba(250, 99, 62, 1);
    font-size: 0.7rem;
    text-align: left;
    font-family: AlibabaPuHui-regular;
  }
  .product-color{
    margin-top: 1rem;
    width: 53.13rem;
    height: 1.25rem;
    line-height: 1.25rem;
    color: rgba(16, 16, 16, 1);
    font-size: 0.88rem;
    text-align: left;
    font-family: AlibabaPuHui-regular;
  }
  .color-btn{
    margin: 0.625rem 1rem 0 0;
    height: 1.88rem;
    border-radius: 0.31rem;
    background-color: rgba(242, 243, 245, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 0.75rem;
    text-align: center;
    font-family: Roboto;
  }
  .color-btn-click{
    margin: 0.625rem 1rem 0 0;
    height: 1.88rem;
    border-radius: 0.31rem;
    background-color: rgba(242, 243, 245, 1);
    color: rgba(22, 93, 255, 1);
    font-size: 0.75rem;
    text-align: center;
    font-family: Roboto;
    border: 0.06rem solid rgba(22, 93, 255, 1);
  }
  .card1-btn{
    width: 7.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    border-radius: 0.31rem;
    font-size: 0.88rem;
    text-align: center;
    font-family: Roboto;
    border: 0.06rem solid rgba(22, 93, 255, 1);
  }
}
// 左边图片被选中时
.selected-img{
    width: 2.5rem;
    height: 3.38rem;
    border: 0.13rem solid rgba(22, 93, 255, 1);
}
.aside-img{
    width: 2.5rem;
    height: 3.38rem;
}
/* el-divider 修改高度效果 */
.el-divider--horizontal{
     margin: 1rem 0;
    //  background: 0 0;
     border-top: 0.1rem solid #f2f3f5;
 }
// 左箭头
 ::v-deep .el-carousel__arrow--left{
    margin-left: -0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1rem;
    color: #000;
    // background-color: #fff;
}
//右箭头
::v-deep .el-carousel__arrow--right{
    margin-right: -0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1rem;
    color: #000;
    // background-color: #fff;
}
//  显示两行
.showOverTooltip{
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
// 颜色按钮 选中
.color-btn-click{
  height: 1.88rem;
  line-height: 1.88rem;
  border-radius: 0.13rem;
  background-color: rgba(22, 93, 255, 1);
  color: rgba(255, 255, 255, 1);
  font-size: 0.88rem;
  text-align: center;
  font-family: Roboto;
}
// 颜色按钮 未选中
.color-btn{
  
  height: 1.88rem;
  line-height: 1.88rem;
  border-radius: 0.13rem;
  background-color: rgba(242, 243, 245, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 0.88rem;
  text-align: center;
  font-family: Roboto;
}
.linechart-title{
    width: 27.5rem;
    height: 1.88rem;
    line-height: 1.88rem;
    color: rgba(16, 16, 16, 1);
    font-size: 1rem;
    text-align: left;
    font-family: AlibabaPuHui-regular;
}
.product-info-title{
    height: 1.88rem;
    line-height: 1.88rem;
    color: rgba(16, 16, 16, 1);
    font-size: 0.88rem;
    text-align: left;
    font-family: AlibabaPuHui-regular;
}
.procuct-price-title{
    margin-top: 1rem;
    width: 5.63rem;
    height: 1.25rem;
    line-height: 1.25rem;
    color: rgba(78, 89, 105, 1);
    font-size: 0.75rem;
    text-align: left;
    font-family: AlibabaPuHui-regular;
  }
  .product-price{
    width: 5.63rem;
    height: 1.88rem;
    line-height: 1.88rem;
    color: rgba(250, 99, 56, 1);
    font-weight: 600;
    text-align: left;
    font-family: AlibabaPuHui-bold;
  }
.data-card{
    margin-left: 3rem;
    margin-top: 1.25rem;
    padding: 1rem;
    box-sizing: border-box;
    min-width: 75rem;
    height: 43.75rem;
    line-height: 1.25rem;
    border-radius: 0.31rem;
    background-color: rgba(255, 255, 255, 1);
    text-align: center;
    .custom-style .el-segmented {
        //   --el-segmented-item-selected-color: var(--el-text-color-primary);
        --el-segmented-item-selected-color:#1F63FF ;
        //   --el-segmented-item-bg-color: #fff;
        --el-segmented-item-selected-bg-color: #F2F3F8;
        --el-border-radius-base: 16px;
    }
}
.list-card{
    margin-left: 3rem;
    margin-top: 1.25rem;
    padding: 1rem;
    box-sizing: border-box;
    min-width: 75rem;
    min-height: 20rem;
    max-height: 43.75rem;
    border-radius: 0.31rem;
    background-color: rgba(255, 255, 255, 1);
}
.can-not-show{  
    margin-top: 3rem;
    width: 36.25rem;
    height: 3.13rem;
    line-height: 3.13rem;
    color: rgba(16, 16, 16, 1);
    font-size: 1rem;
    text-align: center;
    font-family: AlibabaPuHui-regular;
}
.chart-table-title{
    width: 6.25rem;
    height: 1.7rem;
    color: rgba(78, 89, 105, 1);
    font-size: 0.8rem;
    text-align: left;
    font-family: AlibabaPuHui-bold;
}
</style>